<template>
  <div class="showTable">
    <div class="contentul">
      <ul>
        <li
          v-for="(tab, index) in tabList"
          :key="index"
          @click="changeTab(index, tab)"
        >
          <span :class="{ active: current == index }">{{ tab }}</span>
        </li>
      </ul>
    </div>
    <div class="contentbody">
      <div
        class="bodytext container-fluid"
        v-for="author in contentList"
        :key="author.id"
      >
        <div class="imgdiv">
          <img
            class="uimg"
            :src="author.author.avatar_url"
            @click="goUserDetail(author.author.loginname)"
          />
        </div>
        <div class="bodyshow row">
          <div class="showcenter col-lg-8">
            <span class="active" v-if="author.top">顶置</span>
            <span class="active2" v-else-if="author.tab">{{author.tab | chianTab}}</span>
            <span v-else></span>
            <a class="h6" @click="goDetail(author.id)">{{ author.title }}</a>
          </div>
          <div class="showleft col-lg-1">
            <span>
              <i style="color: rgb(158, 120, 196)">{{ author.reply_count }}</i
              >/
              <i style="color: rgb(180, 186, 203)">{{ author.visit_count }}</i>
            </span>
          </div>
          <div class="showright col-lg-1">
            <span class="dayspan">{{ beendays(author) }}</span>
          </div>
        </div>
      </div>
      <Pages :pages="pages"  @pageChange="pageChange" :nodejsTab="nodejsTab"/>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: "ShowContent",
  data() {
    return {
      //这里之间使用，不使用本地仓库了，本身数据不多
      current: 0,
      contentList: [],
      tabList: ["全部", "精华", "分享", "问答", "招聘", "客户端测试"],
      content: [],
      nodejsTab: "",
      buttonCurrent:1,
      pages: {
        pageNo: 1, //当前页
        pageSize: 5, //每页多少条数据
        total: 40, //总共多少条数据
        continues: 5, //展示连续页码数
      },
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    beendays() {
      //解决传值问题用闭包函数就好了，好久没用差点忘记了
      return (author) => {
        //将时间字符串转换成毫秒
        // let oldDate = Date.parse(author.last_reply_at);
        // let newDate = new Date().getTime();
        // let hour = Math.floor((newDate - oldDate) / 1000 / 60 / 60 );
        // let day = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24);
        // let mouth = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30);
        // let year = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30 / 12);
        // return hour <=24 ? hour+'小时' : day<=30 ? day+'天' : mouth<=12? mouth+'个月' : year+'年';
        return moment(author.last_reply_at).fromNow();
      };
    },

  },
  filters:{
    chianTab(tab){
      let chianTab = null;
       switch (tab) {
        case "share":
          chianTab = "分享";
          break;
        case "good":
          chianTab = "精华";
          break;
        case "ask":
          chianTab = "问答";
          break;
        case "job":
          chianTab = "招聘";
          break;
        case "dev":
          chianTab = "客户端测试";
          break;
      }
      return chianTab;
    }
  },
  methods: {
    getData(pageNo = 1, pageSize = 5) {
      this.$API
        .reqGetContentList(pageNo, pageSize)
        .then((res) => {
          this.contentList = res.data;
        })
        .catch((err) => alert("获取主页数据失败"));
    },
    //详情页面
    goDetail(author_id) {
      this.$router.push({
        name: "Detail",
        params: {
          author_id,
        },
      });
    },
    //切换tab
    changeTab(index, tab) {
      this.current = index;
      switch (tab) {
        case "分享":
          this.nodejsTab = "share";
          break;
        case "精华":
          this.nodejsTab = "good";
          break;
        case "问答":
          this.nodejsTab = "ask";
          break;
        case "招聘":
          this.nodejsTab = "job";
          break;
        case "客户端测试":
          this.nodejsTab = "dev";
          break;
        default:
          this.nodejsTab = false;
      }
      if (this.nodejsTab) {
        this.$API
          .reqGetTabContent(
            this.nodejsTab,
            (this.pages.pageNo = 1),
            this.pages.pageSize
          )
          .then((res) => {
            // console.log(res.data);
            this.contentList = res.data;
          });
      } else {
        this.getData();
      }
    },
    pageChange(obj) {
      console.log(obj);
      if (obj.order == "prev" && obj.pageNo > 1) {
        //上一页
        this.changePage(obj.pageNo);
      } else if (obj.order == "next" && obj.pageNo < obj.totalPage) {
        //下一页
        this.changePage(obj.pageNo);
      } else {
        //任意页
        // console.log(pageNo);
        this.pages.pageNo = obj.pageNo;
        this.changePage(obj.pageNo);
      }
    },
    //翻页
    changePage(pageNo) {
      if (this.nodejsTab) {
        this.$API
          .reqGetTabContent(
            this.nodejsTab,
            pageNo,
            this.pages.pageSize
          )
          .then((res) => {
            this.contentList = res.data;
          });
      } else {
        this.getData(pageNo, this.pages.pageSize);
      }
    },
    
    //用户详情
    goUserDetail(loginname) {
      // console.log(loginname);
      this.$router.push({
        name: "UserDetail",
        params: {
          loginname,
        },
      });
    },
  },
};
</script>

<style scoped>
.showTable {
  margin: 20px auto;
  width: 98%;
  border-radius: 5px;
}
.contentul {
  height: 40px;
  background-color: rgb(246, 246, 246);
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}
li {
  float: left;
  line-height: 40px;
  margin-right: 24px;
  font-size: 14px;
  color: rgb(128, 189, 1);
  list-style: none;
}
.active {
  border-radius: 3px;
  padding: 3px;
  background-color: rgb(128, 189, 1);
  color: rgb(255, 255, 255);
}
.active2{
  border-radius: 3px;
  padding: 3px;
  background-color: rgb(218, 219, 213);
  color: rgb(184, 179, 179);
}
.contentbody {
  background: rgb(255, 255, 255);
  padding-bottom: 30px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
.bodytext {
  height: 53px;
  position: relative;
}
.bodytext:hover {
  background: rgb(240, 239, 237);
}
.imgdiv {
  display: inline-block;
  margin-left: 10px;
}
.uimg {
  border-radius: 3px;
  margin-top: 8px;
  width: 35px;
  height: 35px;
}
.bodyshow {
  width: 98%;
  display: inline-block;
  position: absolute;
  padding: 10px;
}
.bodyshow span {
  font-size: 11px;
}
.bodyshow .h6 {
  text-decoration: none;
  color: #000;
  display: inline-block;
  font-size: 16px;
  margin-left: 10px;
  cursor: pointer;
}
.bodyshow .h6:hover {
  text-decoration:underline
}
.showleft {
  margin-left: 4px;
  /* width:6%; */
  display: inline-block;
}
.showleft span {
  font-size: 6px;
}
.showcenter {
  margin: 4px 15px 2px 15px;
  /* width: 70%; */
  display: inline-block;
}
.showright {
  /* width: 5%; */
  display: inline-block;
}
.dayspan {
  color: rgb(123, 128, 135);
}
i {
  font-style: normal;
}

</style>